<!--添加修改用户信息-->
<template>
    <a-modal v-model="showAddTable" :mask-closable="false" :closable="false" :width="720" @on-visible-change="change"
             :title="title ? '系统参数新增' : '系统参数编辑'"
             :maskClosable="false"
             :destroyOnClose="true" @cancel="cancelApply">
        <a-form ref="sysSetting" :form="form" @keydown.native.enter.prevent="saveApply" class="modelSearch">
            <a-form-item label="系统名称：" v-bind="formStyle">
                <a-select  v-model="serverCode"  disabled
                           placeholder="全部">
                    <a-select-option v-for="item in nacosService" :value="item.serverCode" :key="item.serverCode">{{item.serverName }}
                    </a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="参数名称：" v-bind="formStyle">
                <a-input
                        placeholder="请输入参数名称" ref="re"
                        v-decorator="[
                        'paramName',
                        {
                            rules: [
                                { required: true, message: '请输入汉字、字母、数字、_或-字符' },
                                 { validator: this.verify.validateDictCode.bind(this) }
                            ],
                            getValueFromEvent: event => {
                                return this.verify.formalSettingSpace(event,50)
                            }
                        }
                    ]"
                />
            </a-form-item>
            <template  v-if="serverCode === 'qrmc' && code === '10000002'">
                <a-form-item label="参数地址：" class="handFile formError" v-bind="formStyle"  style="position: relative; margin-bottom: 14px;"  required :extra = "addressMsg">
                    <a-cascader :options="pcaCodeList" v-model="addressPath" :getPopupContainer="trigger => trigger.parentNode"  :fieldNames="fieldNames"  @change="onChangeAddress" placeholder="请选择参数地址"/>
                </a-form-item>
            </template>
            <a-form-item label="参数值：" prop="paramValue" v-bind="formStyle" v-else>
                <a-input
                        placeholder="请输入参数值" ref="re"
                        v-decorator="[
                        'paramValue',
                        {
                            rules: [
                                { required: false, message: '请输入汉字、字母、数字、_、-、.和+字符' },
                            ],
                            getValueFromEvent: event => {
                                return this.verify.formalSettingSpace(event,32)
                            }
                        }
                    ]"
                />
            </a-form-item>
            <a-form-item label="备注：" prop="description" v-bind="formStyle">
                <a-textarea v-decorator="['description',{   rules: [{validator:this.verify.validateDescripte.bind(this)}],
                               getValueFromEvent: (event) => {
                                   return this.verify.formalhundredSpace(event)
                               }
                            }]" :rows="3" placeholder="请输入备注"/>
            </a-form-item>
        </a-form>
        <div slot="footer">
            <a-button type="default" size="default" @click="cancelApply()">取消</a-button>
            <a-button type="primary" size="default" @click="saveApply()">确定</a-button>
        </div>
    </a-modal>
</template>

<script>
    import verify from 'libs/verify'
    import * as pcajs from 'libs/pcaCode'
    export default {
        name: 'addEdit',
        data () {
            return {
                verify,
                form: this.$form.createForm(this),
                showAddTable: false,
                showDelTable: false,
                searchKey: '',
                roleType: '',
                flags: '',
                /*选中的记录*/
                checkData: [],
                id:0,
                pcaCodeList:[],
                addressPath:[],
                fieldNames:{ label: 'name', value: 'name', children: 'childrend' },
                addressMsg:'',
                code:''
            }
        },
        props: {
            sysSetting: {
                type: Object,
                required: true
            },
            title: {
                type: Boolean,
                required: true
            },
            nacosService: {
                type: Array,
                required: true
            },serverCode: {
                type: String,
                required: true
            },
        },
        computed: {
            formStyle() {
                return this.$store.state.common.formStyle
            }
        },
        methods: {
            /**
             * Function    : change
             * Description :
             * Input       : none
             * Return      : none
             */
            change ( val ) {
                let _this = this
                setTimeout (function () {
                    if (val) {
                        _this.$refs[ 're' ].focus ()
                    }
                }, 200)
            },

            /**
             * Function    : showModal
             * Description : 打开弹框
             * Input       : none
             * Return      : none
             */
            showModal () {
                this.showAddTable = true
                if(this.serverCode === 'qrmc'){
                    this.pcaCodeList = pcajs.default
                    this.code = ''
                }
            },
            /**
             * Function    : showEdit
             * Description : 编辑时显示
             * Input       : opt单个所有数据
             * Return      : none
             */
            showEdit ( opt ) {
                this.showAddTable = true
                if(this.serverCode === 'qrmc' && opt.code === '10000002'){
                    this.pcaCodeList = pcajs.default
                    this.addressPath =opt.paramValue.split('/')
                    this.code = opt.code
                    this.$nextTick (() => {
                        this.form.setFieldsValue (this.$pick (opt, [ 'paramName', 'description' ]))
                    })
                }else{
                    this.$nextTick (() => {
                        this.form.setFieldsValue (this.$pick (opt, [ 'paramName', 'paramValue', 'description' ]))
                    })
                }
                this.id = opt.id
            },

            /**
             * Function    : saveApply
             * Description : 用户信息新增、编辑保存
             * Input       : name
             * Return      : none
             */
            saveApply ( ) {
                this.form.validateFields((err, value) => {
                    if (!err) {
                        if (this.title) {
                            let para = Object.assign ({}, value)
                            para.sortCode = this.sysSetting.sortCode
                            para.sortName = this.sysSetting.sortName
                            para.serverCode = this.serverCode
                            this.$store.dispatch ('addSysConfigAct', para).then (response => {
                                this.showAddTable = false
                                if (response.code === 0) {
                                    this.$emit ('init')
                                    this.$message.success (response.message)
                                } else {
                                    this.$message.error (response.message)
                                }
                            })
                        } else {
                            let para = Object.assign ({}, value)
                            para.id = this.id
                            para.serverCode = this.serverCode
                            if(this.serverCode === 'qrmc' && this.code === '10000002'){
                                para.paramValue =  this.addressPath.join('/')
                            }
                            this.$store.dispatch ('updSysConfigAct', para).then (response => {
                                this.showAddTable = false
                                if (response.code === 0) {
                                    this.$emit ('init')
                                    this.$message.success (response.message)
                                } else {
                                    this.$message.error (response.message)
                                }
                            })
                        }
                    }
                })
            },

            /**
             * Function    : cancelApply
             * Description : 关闭新增或编辑页面
             * Input       : name
             * Return      : none
             */
            cancelApply ( ) {
                this.showAddTable = false
                let _this =this
                setTimeout(function() {
                    _this.form.resetFields()
                    _this.addressMsg=''
                    _this.code=''
                    _this.addressPath=[]
                }, 100)
            },
            onChangeAddress(value) {
                if(value.length === 0){
                    this.addressMsg = '请选择参数地址'
                }else{
                    this.addressMsg = ''
                }

            }
        }
    }
</script>
<style  rel="stylesheet/less"  lang="less">
    .ant-cascader-input.ant-input {
        background-color: #f1f2f6 !important;
    }
</style>